<template>
	<view class="good_detail_wrap">
		<!-- 轮播 -->
		<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
			:duration="duration">
			<swiper-item v-for="(item,index) in picData" :key="index" @click="PreView(index)">
				<image :src="item.src"></image>
			</swiper-item>
		</swiper>

		<!-- 商品参数 -->
		<view class="goods_info" v-for="item in goodsInfo" :key="item.id">
			<view class="goods_price">
				<text class="new_price">￥{{item.sell_price}}</text>
				<text class="old_price">￥{{item.market_price}}</text>
			</view>
			<view class="goods_title">
				{{item.title}}
			</view>
			<view class="goods_no">
				货号：{{item.goods_no}}
			</view>
			<view class="goods_number">
				库存：{{item.stock_quantity}}
			</view>
		</view>

		<!-- 详细 -->
		<view class="good_detail" v-for="(item,index) in goodData" :key="index">
			<view>详细介绍</view>
			<rich-text :nodes="item.content"></rich-text>
		</view>
		
		<!-- 底部栏 -->
		<view class="goods_nav">
			<uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
				@buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodData: [],
				picData: [],
				goodsInfo: [],
				options: [{
					icon: 'headphones',
					text: '客服'
				}, {
					icon: 'shop',
					text: '店铺',
					info: 2,
					infoBackgroundColor: '#007aff',
					infoColor: "red"
				}, {
					icon: 'cart',
					text: '购物车',
					info: 2
				}],
				buttonGroup: [{
						text: '加入购物车',
						backgroundColor: '#ff0000',
						color: '#fff'
					},
					{
						text: '立即购买',
						backgroundColor: '#ffa200',
						color: '#fff'
					}
				]
			}
		},
		methods: {
			async getGoodsData(id) {
				const res = await this.$request({
					url: `/api/goods/getdesc/${id}`
				})
				this.goodData = res.data.message
			},
			// 获取轮播图数据
			async getPic(id) {
				const res = await this.$request({
					url: `/api/getthumimages/${id}`
				})
				// console.log(res);
				this.picData = res.data.message
			},
			PreView(current) {
				const urls = this.picData.map(item => {
					return item.src
				})
				uni.previewImage({
					current,
					urls
				})
			},
			// 获取商品参数
			async getInfo(id) {
				const res = await this.$request({
					url: `/api/goods/getinfo/${id}`
				})
				// console.log(res);
				this.goodsInfo = res.data.message
			},
			onClick(e) {
				uni.showToast({
					title: `点击${e.content.text}`,
					icon: 'none'
				})
			},
			buttonClick(e) {
				console.log(e)
				this.options[2].info++
			}
		},
		onLoad(option) {
			this.getGoodsData(option.id)
			this.getPic(option.id)
			this.getInfo(option.id)
		}
	}
</script>

<style lang="less" scoped>
	.good_detail_wrap {
		width: 750rpx;
		height: 700rpx;
		padding: 20rpx;
		box-sizing: border-box;

		.swiper {
			height: 100%;

			swiper-item {
				image {
					width: 100%;
					height: 100%;
					background-color: #EEEEEE;

				}
			}
		}

		.goods_info {
			margin-top: 20rpx;

			.goods_price {
				margin: 30rpx 0;

				.new_price {
					color: #b50e03;
					font-size: 36rpx;
					font-weight: 600;
				}

				.old_price {
					color: #EEEEEE;
					text-decoration: line-through;
					font-size: 28rpx;
					margin-left: 20rpx;
				}
			}

			.goods_title {
				padding: 20rpx 0;
				border-bottom: 10rpx solid #EEEEEE;
			}

			.goods_no {
				padding: 10rpx 0;
			}

			.goods_number {
				padding: 10rpx 0;
				border-bottom: 10rpx solid #EEEEEE;
			}
		}

		.good_detail {
			margin-bottom: 60rpx;
			view {
				font-size: 38rpx;
				margin: 20rpx 0;
			}

			rich-text {}
		}
		
		.goods_nav{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}

	}
</style>
